import {
  Button,
  Form,
  Input,
  DatePicker,
  Table,
  Switch,
  message,
  Modal,
  Spin,
} from "antd";
import {
  PlusOutlined,
  DeleteOutlined,
  SearchOutlined,
  EditOutlined,
} from "@ant-design/icons";
import "./index.css";
import * as http from "@/api/product";
import React, { useState } from "react";
// let [show, setShow] = useState(false);

const ProductList = () => {
  let rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === "Disabled User", // Column configuration not to be checked
      name: record.name,
    }),
  };
  let state = {
    dialogVisible: false,
    actionType: "添加商品",
    tableLoading: true,
    columns: [
      {
        title: "商品编号",
        dataIndex: "product_id",
        align: "center",
      },
      {
        title: "商品名称",
        dataIndex: "productName",
        align: "center",
      },
      {
        title: "商品价格",
        dataIndex: "price",
        align: "center",
      },
      {
        title: "是否上架",
        dataIndex: "onSell",
        align: "center",
        render(switched, row) {
          return (
            <Switch
              onChange={this.sellSwitchChange.bind(this, row, switched)}
            />
          );
        },
      },
      {
        title: "加入时间",
        dataIndex: "updateTime",
        align: "center",
      },
      {
        title: "操作",
        dateIndex: "operation",
        align: "center",
        render(row) {
          return (
            <div className="action_button">
              <Button
                type="primary"
                onClick={this.edit.bind(this, row)}
                icon={<EditOutlined />}
              ></Button>
              <Button
                type="primary"
                danger
                icon={<DeleteOutlined />}
                onClick={() => {
                  // setShow(true);
                  this.deletes.bind(this, row);
                }}
              ></Button>
            </div>
          );
        },
      },
    ],
    dataSource: [],
  };
  let sellSwitchChange = (row, switched) => {
    console.log(row);
  };
  let edit = (row) => {
    console.log(row);
  };
  // let deletes = (row) =>{
  //   console.log(row);
  // }
  let deletes = (row) => {
    console.log(row);
  };
  let addProduct = () => {
    this.setState({
      dialogVisible: true,
    });
  };
  let updateProductList = (product_id = "") => {
    http.getProduct(product_id).then((res) => {
      this.setState({
        tableLoading: false,
      });
      if (res.data.state) {
        let dataSource = res.data.data.map((item) => {
          return {
            key: item.product_id,
            ...item,
          };
        });
        this.setState({
          dataSource,
        });
      }
    });
  };

  let componentDidMount = () => {
    this.updateProductList();
  };

  let hideDialog = () => {
    this.setState({
      dialogVisible: false,
    });
  };
  return (
    <div className="list_container">
      <div className="tip">
        <p className="tip_top">操作提示</p>
        <ul>
          <li>1.该页展示了商城所有的商品信息,可对商品进行修改操作</li>
          <li>2.商家添加商品后,需要耍新页面才能看到最新商品</li>
        </ul>
      </div>
      {/* 中间操作部分 */}
      <div className="operation">
        <div className="button">
          <Button
            type="primary"
            onClick={this.addProduct.bind(this)}
            icon={<PlusOutlined />}
          >
            添加商品
          </Button>
          <Button type="primary" danger icon={<DeleteOutlined />}>
            批量删除
          </Button>
        </div>
        <div className="search">
          <Form>
            <Form.Item label="商品内容">
              <Input placeholder="商品名称/编号" />
            </Form.Item>
            <Form.Item label="添加时间">
              <DatePicker
                placeholder="选择日期"
                onChange={this.onDateChange.bind(this)}
              />
            </Form.Item>
            <Button icon={<SearchOutlined />} type="primary">
              查询
            </Button>
          </Form>
        </div>
      </div>
      {/* 表格部分 */}
      <div className="table">
        {/* <Modal
            title="删除提示"
            content
            visible={show}
            onOk={() => {
              //删除数据
              // handleDeleteCategory();
              //关闭弹框
              setShow(false);
            }}
            onCancel={() => {
              setShow(false);
              message.info("已取消删除");
            }}
            okText="确认"
            cancelText="取消"
          >
            <b>将永久删除数据,是否确定?</b>
            <h1 style={{ color: "red" }}>警告:不要删除vip类目</h1>
          </Modal> */}
        <Table
          loading={this.state.tableLoading}
          bordered
          rowSelection={this.rowSelection}
          columns={this.state.columns}
          dataSource={this.state.dataSource}
        ></Table>
      </div>
    </div>
  );
};

export default ProductList;
